<template>
    <example :template-code="templateString">
        <template #describe>
            <t :id="`${$t('自动计算函数')}`">{{ $t('自动计算函数') }}</t>
            <li>
                为某个控件配置<span class="d-code">relationResults</span>便可以实现自定义它的运算结果
            </li>
            <li>
                该字段的值类型为<span class="s-code">Function</span>或者<span class="s-code">String</span>(一个可被<span class="s-code">eval 函数</span>解析的函数字符串)，
                参数为表单数据<span class="s-code">form</span>，它需要<span class="s-code">return</span>一个新的值，用于重写该控件的绑定值
            </li>
        </template>
        <sib-form
            style="width: 600px;"
            :is-submit="false"
            :is-reset="false"
            :row-field-size="2"
            :fields="fields"
            :form="formData">
        </sib-form>
    </example>
</template>

<script>
import { ref, reactive } from 'vue';

export default {
    setup() {
        const formData = reactive({
            number1: 2,
            number2: 5,
        });

        const fields = ref([
            {
                label: '人物',
                code: 'role',
                type: 'select',
                options: [
                    { label: '张三', value: 1 },
                    { label: '望哥', value: 2 },
                ],
            },
            {
                label: '数值',
                code: 'number1',
                type: 'text',
                valueType: 'number',
            },
            {
                label: '职业',
                code: 'job',
                type: 'select',
                options: [
                    { label: '菜鸡码农', value: 1 },
                    { label: '法外狂徒', value: 2 },
                ],
            },
            {
                label: '数值',
                code: 'number2',
                type: 'number',
                showCalculator: true,
            },
            {
                label: '爱好',
                code: 'hobby',
                type: 'select',
                options: [
                    { label: '看望哥学刑法', value: 1 },
                    { label: '看望哥敲代码', value: 2 },
                    { label: '看张三学刑法', value: 3 },
                    { label: '看张三敲代码', value: 4 },
                ],
                // 类型可以为 Function
                relationResults: ({ role, job }) => (['1-1', '1-2', '2-1', '2-2'].findIndex((d) => d === `${role}-${job}`) + 1) || '',
            },
            {
                label: '结果',
                code: 'result',
                type: 'label',
                // 类型也可以为 String (可被 eval 解析的 function)
                relationResults: '(form) => Number(form.number1) * Number(form.number2)',
            },
        ]);

        return {
            fields,
            formData,
            templateString: `<template>
    <sib-form
        style="width: 600px;"
        :is-submit="false"
        :is-reset="false"
        :row-field-size="2"
        :fields="fields"
        :form="formData">
    </sib-form>
</template>

<script>
import { ref, reactive } from 'vue';

export default {
    setup() {
        const formData = reactive({
            number1: 2,
            number2: 5,
        });

        const fields = ref([
            {
                label: '人物',
                code: 'role',
                type: 'select',
                options: [
                    { label: '张三', value: 1 },
                    { label: '望哥', value: 2 },
                ],
            },
            {
                label: '数值',
                code: 'number1',
                type: 'text',
                valueType: 'number',
            },
            {
                label: '职业',
                code: 'job',
                type: 'select',
                options: [
                    { label: '菜鸡码农', value: 1 },
                    { label: '法外狂徒', value: 2 },
                ],
            },
            {
                label: '数值',
                code: 'number2',
                type: 'number',
                showCalculator: true,
            },
            {
                label: '爱好',
                code: 'hobby',
                type: 'select',
                options: [
                    { label: '看望哥学刑法', value: 1 },
                    { label: '看望哥敲代码', value: 2 },
                    { label: '看张三学刑法', value: 3 },
                    { label: '看张三敲代码', value: 4 },
                ],
                // 类型可以为 Function
                relationResults: ({ role, job }) => (['1-1', '1-2', '2-1', '2-2'].findIndex((d) => d === \`\${role}-\${job}\`) + 1) || '',
            },
            {
                label: '结果',
                code: 'result',
                type: 'label',
                // 类型也可以为 String (可被 eval 解析的 function)
                relationResults: '(form) => Number(form.number1) * Number(form.number2)',
            },
        ]);

        return { fields, formData };
    },
};
<\/script>`,
        };
    },
};
</script>
